<template>

    <div>
        <HeaderTop :title="address.name">
            <router-link slot="left" to="/search">
                <div class="search">
                        <div class="iconfont icon-sousuo"></div>
                </div>
            </router-link>
            <router-link class='header_login' slot="right" :to="userInfo._id? '/userinfo':'/profile'">
                <div class="header_login_text" v-if="!userInfo._id">
                    注册|登录
                </div>
                <div class="header_login_text iconfont icon-wodeqianfenleishouye" v-else @click="$router.push('/userinfo')">

                </div>
            </router-link>
        </HeaderTop>

        <div class="msite_content border-px">
            <!--导航轮播-->
            <div class="msite_nav">

                    <mt-swipe :auto="4000" v-if="pages.length">
                        <mt-swipe-item class="swipe_item" v-for="(page,index) in pages" :key="index">
                            <a href="javascript:" class="link_to_food" v-for="(item,index) in page" :key="index">
                                <div>
                                    <img v-lazy="baseimageUrl+item.image_url" :alt="item.description">
                                </div>
                                <span>{{item.title}}</span>
                            </a>
                        </mt-swipe-item>

                    </mt-swipe>
                <img src="./images/msite_back.svg" alt="black" v-else>


            </div>
            <!--商铺信息-->
            <div class="msite_shop_list">
                <!--商铺标题-->
                <div class="msite_shop_title">
                    <i class="iconfont icon--guanli"></i>
                    <span>附近商家</span>
                </div>
                <!--店铺详细-->
                <ShopList></ShopList>
            </div>
        </div>


    </div>
</template>

<script>
    import HeaderTop from '../../components/HeaderTop/HeaderTop.vue'
    import ShopList from '../../components/ShopList/ShopList.vue'
    import {mapState,mapActions} from 'vuex'
    export default {
        name: "MSite",
        data(){
            return{
               // pages:[]
                baseimageUrl: 'https://fuss10.elemecdn.com'
            }
        },
        methods:{
            //映射actions的getCategorys方法获取食品分类列表
            ...mapActions(['getCategorys']),
            //映射action里面的getShops方法到Msite组件，获取店铺列表，并且修改state
                ...mapActions(["getShops"])
        },
        components:{
            HeaderTop,
            ShopList
        },
        computed:{
            //获取state的地址

            ...mapState(['address','categorys','userInfo']),
            pages(){//食品分类，拆开页面

                const pages=[];
                this.categorys.forEach((item,index)=>{
                    const page=Math.floor(index/8);
                    if(!pages[page]){
                        pages[page]=[]
                    }
                    pages[page].push(item)

                });
                return pages

            }

        },
        mounted() {
            //通过映射actions的getCategorys方法获取食品分类列表，已经通过mutation修改state内容
            this.getCategorys();
            this.getShops();


            // (function(){
            //     var arr=this.categorys;
            //     const pages=[];
            //     for(var i=0;i<arr.length;i++){
            //         const page=Math.floor(i/8);
            //         if(!pages[page]){
            //             pages[page]=[]
            //         }
            //         pages[page].push(arr[i])
            //     }
            //     this.pages=pages
            // })()

        }
    }
</script>

<style lang="stylus" scoped>
    @import '../../assets/mixin.styl'
    .search
        position:absolute
        left: 15px
        top:0
        height:1rem
        line-height:1rem
        width:10%
        .icon-sousuo
            font-size 25px
            color #fff
    .header_login
        position:absolute
        right:0.3rem
        top:0
        height:1rem
        line-height:1rem
        .header_login_text
            color:#fff
            font-size:14px
    .msite_content
        top-border-1px(#f1c) //设置的1px媒体查询无效，？？？
        position:relative
        top:1rem
        padding-bottom:1rem
        width: 100%
        background:#9966ff
        .msite_nav
            background:#fff
            height:4rem
            .swipe_item
                width: 100%
                display:block
                height:4rem
                .link_to_food
                    display:block
                    width:25%
                    height:2rem
                    float:left
                    font-size:0.3rem
                    background-color:#fff
                    text-align:center
                    img
                        display:block
                        height:80%
                        width:60%
                        margin:0 auto
        .msite_shop_list
            .msite_shop_title
                font-size:0.3rem
                color: #ffffff
                padding-top:0.2rem
                padding-left:0.35rem
                padding-bottom:0.2rem
                span
                    padding-left:0.1rem
</style>
